<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pa15">
					<view class="re">
						<textarea class="evaluate_textarea_sty" placeholder="请写下您的感受吧,对他人帮助很大哦~~"
							placeholder-style="color: #999;" v-model="text"></textarea>
					</view>
					<view class="mt20 area_block_1">
						<view class="flex_box aic">
							<view class="fs28 cor_000">综合评价：</view>
							<view class="item">
								<view class="df aic">
									<uni-rate v-model="stars"  allow-half :readonly="false" color="#bbb" :size="20"  active-color="red" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价-按钮 -->
			<view class="consult_immediately_btn" @tap="uploadDatumComm">评价</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		uploadDatumCommApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				id: 0,
				text: '',
				stars: 0
			}
		},
		onLoad(options) {
			if (!options.id) {
				toast('参数不正确！');
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				}, 1000)
			}
			this.id = options.id
		},
		methods: {
			uploadDatumComm() {
				let that = this;
				if (!this.id) {
					toast('参数不正确');
					return false;
				}
				if (!this.text) {
					toast('请填写评价内容');
					return false;
				}
				if (!this.stars) {
					toast('请选择评分');
					return false;
				}
				showLoading('加载中');
				uploadDatumCommApi({
					userId: uni.getStorageSync('userId'),
					id: this.id,
					text: this.text,
					stars: this.stars,
				}).then(res => {
					toast('感谢您的评价!');
					hideLoading();
					setTimeout(function(){
						uni.redirectTo({
							url: '/pages/information_details/information_details?id=' + that.id
						})
					},2000)
				}).catch(err => {
					hideLoading();
				})
			},
			
			
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.evaluate_textarea_sty {
		display: block;
		width: 100%;
		height: 450rpx;
		padding: 20rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #000;
		background-color: #fff;
		border-radius: 20rpx;
		border: none;
		outline: none;
	}

	.area_block_1 {
		position: relative;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
</style>
